/**
 * jquery.rangePicker.js - v 0.0.1
 * author: http://my.oschina.net/dtec
 * date: 2013-8-1 19:00
 */
;
(function($) {
    function rangePicker(options) {
        //合并配置项
        this.options = $.extend({}, rangePicker.options, options);
        //记录控件将添加到的指定元素
        this.appendToElement = $(this.options.appendTo);
        //记录滑块列表
        this._sliderList = [];
        //创建外层容器元素
        this.wrapElement = $('<span class="think-rangepicker"></span>');
        //创建显示条元素
        this.barElement = $('<b class="think-rangepicker-bar"></b>').appendTo(this.wrapElement);
        //创建进度条元素
        this.progressElement = $('<b class="think-rangepicker-progress"></b>').appendTo(this.barElement);
        //禁止选中文本
        rangePicker.unSelected(this.wrapElement, true);
        //将外层容器添加到指定容器中
        this.wrapElement.appendTo(this.appendToElement);
        //设置控件总路程
        this._distance(this.options.distance);
        //设置控件单次步入距离
        this.step(this.options.step);
        //初始新增滑块
        if($.isArray(this.options.sliderValue)){
            for(var i = 0; i < this.options.sliderValue.length; i++){
                this.addSlider(this.options.sliderValue[i]);
            }
        }else{
            this.addSlider(this.options.sliderValue);
        }
        
        // this.sliderValue(this.options.sliderValue);
        //设置控件是否禁用
        // this.disabled(this.options.disabled);
    }
    /**
     * 设置或返回滑块的值
     * @param value {Number || Array} 当前值
     * @param slider {slider} 指定滑块
     * @summary 如果为数组时则将控件模式变为范围选取
     * @return value
     */
    rangePicker.prototype.sliderValue = function(number,slider) {
        if ($.isNumeric(number)) {
            if(this.isSlider(slider)){
                slider.value = number;
                slider.element.css('left', number);
            }
        } else {
            if(this.isNumeric(number)){
                return number.value;
            }
        }
    }
    /**
     * 检测对象是否为滑块
     * @param object {Object} 待检测的对象
     * @return Boolean
     */
    rangePicker.prototype.isSlider = function(object) {
        if($.isPlainObject(object)){
            if('isSlider' in object){
                return true;
            }
        }
        return false;
    }
    /**
     * 获取指定滑块
     * @param element {element} 页面上的滑块元素
     * @return slider
     */
    rangePicker.prototype.getSlider = function(element) {
        for(var i = 0; i < this._sliderList.length; i++){
            if(this._sliderList[i]['element'].is(element)){
                return this._sliderList[i];
            }
        }
        return false;
    }
    /**
     * 删除指定滑块
     * @param element {element} 页面上的滑块元素
     * @return slider
     */
    rangePicker.prototype.delSlider = function(element) {
        var _slider = this.getSlider(element);
        if(_slider){
            if(this._sliderList[_slider.index]){
                this._sliderList.splice(_slider.index,1);
            }
        }
        return false;
    }
    /**
     * 新增滑块
     * @param value {Number} 滑块的初始值
     * @return slider
     */
    rangePicker.prototype.addSlider = function(value) {
        var
        _self = this,
        _slider = {
            element : $('<b class="think-rangepicker-slider">&nbsp;</b>'),
            value : $.isNumeric(value) ? value : 0,
            isDisabled : false,
            isSlider : true
        };
        _slider.element.appendTo(this.wrapElement);
        rangePicker.drag(_slider.element, this.wrapElement,$.noop, function(x, y, left, top){
            _slider.value = left;
            $.isFunction(_self.options.onDraging) && _self.options.onDraging.call(_self, _slider);
        });
        this._sliderList.push(_slider);
        _slider.index = this._sliderList.length - 1;
        this.sliderValue(_slider.value, _slider);
        return this;
    }
    /**
     * 设置滑块禁用或解除禁用状态
     * @param status {Boolean} 状态
     * @return disabled
     */
    rangePicker.prototype.disabledSlider = function(status,slider) {
        if(!this.isSlider(status)){
            var _status = status ? true : false, _element = [];
            if(this.isSlider(slider)){
                slider['isDisabled'] = _status;
                _element.push(slider['element']);
            }else{
                if(typeof slider == 'undefined'){
                    for(var i = 0; i < this._sliderList.length; i++){
                        this._sliderList[i]['isDisabled'] = _status;
                        _element.push(this._sliderList[i]['element']);
                    }
                }
            }
            for(var i = 0; i < _element.length; i++){
                if(_status){
                    this.addClass('think-rangepicker-slider-disabled');
                }else{
                    this.removeClass('think-rangepicker-slider-disabled');
                }
            }
        }else{
            return status['isDisabled'];
        }
    }
    /**
     * 设置或返回控件的总量值
     * @param status {Number} 总量值
     * @return distance
     */
    rangePicker.prototype._distance = function(number) {
        if(typeof number != 'undefined'){
            if($.isNumeric(number)){
                this._distanceValue = number;
            }
        }else{
            return this._distanceValue;
        }
    }
    /**
     * 设置或返回控件单次步入的距离
     * @param step {Number} 单次步入距离
     * @summary (单次步入的距离/总路程*100)不得小于1，否则按1来取值
     * @return step
     */
    rangePicker.prototype.step = function(step) {
        if(typeof step != 'undefined'){
            this._stepValue = step || 1;
            if(this.options.decollator){
                rangePicker.createDecollator(this._stepValue, this._distanceValue, this.barElement);
            }else{

            }
        }else{
            return this._stepValue;
        }
        return this;
    }
    /**
     * 计算单步列表
     * @param step {Element} 单步值
     * @param total {Number} 总量值
     * @return array
     */
    rangePicker.stepList = function(step, total){

    }
    /**
     * 更新进度条
     * @param element {Element} 进度条元素
     * @param start {Number} 起始距离
     * @param end {Number} 结束距离
     * @return Element
     */
    rangePicker.progress = function(element, start, end, callback) {
        var _start = Math.min(start, end);
        var _end = Math.max(start, end);
        element.css({
            'margin-left' : _start,
            'width' : Math.abs(_end - _start)
        });
        this._startValue = _start;
        this._endValue = _end;
        $.isFunction(callback) && callback.call(element, _start, _end);
    }
    /**
     * 创建分割条
     * @param step {Number||Array} 单步进入值
     * @param total {Number} 总量值
     * @param element {Element} 进度条元素
     * @return Element
     */
    rangePicker.createDecollator = function(step, total, element) {
        console.log(step, total, element)
    }
    /**
     * 清空分割条
     * @param element {Element} 进度条元素
     * @return Element
     */
    rangePicker.emptyDecollator = function(element) {
        
    }
    /**
     * 禁止选中文本
     * @param element {Element} 禁止选中文本的元素
     * @param status {Boolean} 启用或关闭禁止选中
     * @return Element
     */
    rangePicker.unSelected = function(element,status){
        element[0].onselectstart = function() {return false};
        element[0].unselectable = 'on'; 
        element[0].style.MozUserSelect = 'none'; 
        return element;
    }
    /**
     * 计算实际拖拽量
     * @param rd {Number} 控件总路程
     * @param rc {Number} 控件当前选择路程
     * @param sd {Number} 实际总路程
     * @return number
     */
    rangePicker.compute = function(rd, rc, sd) {

    }
    /**
     * 将百分比数值转换成相对实际总量值
     * @param percent {Number} 百分比值
     * @param total {Number} 实际总量
     * @return number
     */
    rangePicker.percentCash = function(percent, total) {
        if(typeof percent == 'string'){
            var _index = percent.lastIndexOf('%'), _length = percent.length;
            if(_index == _length - 1){
                var _number = percent.substring(_index, _length);
                if($.isNumeric(_number) && $.isNumeric(total)){
                    return Number(_number) * Number(total);
                }
            }else{
                if($.isNumeric(percent)){
                    return percent;
                }
            }
        }
        return false;
    }
    /**
     * 元素拖拽
     * @return void
     */
    rangePicker.drag = function(element, range, dragStart, darging, dragEnd) {
        var 
            _left = 0,
            _top = 0,
            _x = 0,
            _y = 0,
            _status = false,
            _limit = {},
            _range = range || $('body');
        element.bind('mousedown', function(event) {
            var _offset1 = $(this).offset();
            var _offset2 = _range.offset();
            _status = true;
            _x = event.pageX - _offset1.left;
            _y = event.pageY - _offset1.top;
            _limit.left = _offset2.left;
            _limit.top = _offset2.top;
            _limit.right = _range.innerWidth() - $(this).outerWidth();
            _limit.bottom = _range.innerHeight() - $(this).outerHeight();
            $.isFunction(dragStart) && dragStart.call(element, _x, _y);
        });
        $('body').bind('mousemove', function(event) {
            if (_status) {
                _left = event.pageX - _x;
                _top = event.pageY - _y;
                _left = Math.max(0, _left - _limit.left);
                _left = Math.min(_limit.right, _left);
                _left = _left < 0 ? 0 : _left;
                _top = Math.max(0, _top - _limit.top);
                _top = Math.min(_limit.bottom, _top);
                _top = _top < 0 ? 0 : _top;
                element.css({
                    left: _left,
                    top: _top
                });
                $.isFunction(darging) && darging.call(element, _x, _y, _left, _top);
            }
        }).bind('mouseup', function() {
            _status = false;
            $.isFunction(dragEnd) && dragEnd.call(element, _left, _top);
        });
    }
    //默认配置
    rangePicker.options = {
        style: 'think-rangepicker', //组件样式名称
        distance: 100, //控件拖拽的总量值
        step: 10, //单步进入值,相对于总量值
        decollator : true, //是否显示单步分割条
        appendTo: null, //控件将被添加到指定元素内
        sliderValue: [0,112], //设置每个滑块的值
        maxValue: 90, //最大可设置值
        minValue: 30, //最小可设置值
        disabled: false, //是否禁用控件
        onDragStart: null, //准备拖拽滑块时触发
        onDraging: null, //拖拽滑块时触发
        onDragEnd: null, //拖拽结束后触发
        onChange: null, //值发生改变时触发
        onCreate: null //控件创建完毕触发
    }
    $.fn.rangePicker = function(options) {
        return new rangePicker($.extend({
            appendTo: $(this)
        }, options));
    }
})(jQuery);
